var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};


function init(data, leaf){
    var json = data;
    //init data
    // var json = {
    //     id: "node02",
    //     name: "恒拓开源",
    //     data: {},
    //     children: [{
    //         id: "node13",
    //         name: "广州分公司",
    //         data: {},
    //         children: [{
    //             id: "node24",
    //             name: "工程一部",
    //             data: {},
    //             children: [{
    //                 id: "node35",
    //                 name: "开发工程师",
    //                 data: {},
    //                 children: [{
    //                     id: "node46",
    //                     name: "4.6",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node37",
    //                 name: "工程二部",
    //                 data: {},
    //                 children: [{
    //                     id: "node48",
    //                     name: "开发工程司",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node49",
    //                     name: "项目经理",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node410",
    //                     name: "技术经理",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node411",
    //                     name: "助理",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node312",
    //                 name: "产品研发部",
    //                 data: {},
    //                 children: [{
    //                     id: "node413",
    //                     name: "研发工程师",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node314",
    //                 name: "后勤部",
    //                 data: {},
    //                 children: [{
    //                     id: "node415",
    //                     name: "后勤专员1",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node416",
    //                     name: "后勤专员2",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node417",
    //                     name: "后勤专员3",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node418",
    //                     name: "后勤专员4",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node319",
    //                 name: "人事部",
    //                 data: {},
    //                 children: [{
    //                     id: "node420",
    //                     name: "4.20",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node421",
    //                     name: "4.21",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node222",
    //             name: "2.22",
    //             data: {},
    //             children: [{
    //                 id: "node323",
    //                 name: "3.23",
    //                 data: {},
    //                 children: [{
    //                     id: "node424",
    //                     name: "4.24",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }]
    //     }, {
    //         id: "node125",
    //         name: "深圳分公司",
    //         data: {},
    //         children: [{
    //             id: "部门1",
    //             name: "2.26",
    //             data: {},
    //             children: [{
    //                 id: "node327",
    //                 name: "3.27",
    //                 data: {},
    //                 children: [{
    //                     id: "node428",
    //                     name: "4.28",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node429",
    //                     name: "4.29",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node330",
    //                 name: "部门2",
    //                 data: {},
    //                 children: [{
    //                     id: "node431",
    //                     name: "4.31",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node332",
    //                 name: "3.32",
    //                 data: {},
    //                 children: [{
    //                     id: "node433",
    //                     name: "4.33",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node434",
    //                     name: "4.34",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node435",
    //                     name: "4.35",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node436",
    //                     name: "4.36",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node237",
    //             name: "2.37",
    //             data: {},
    //             children: [{
    //                 id: "node338",
    //                 name: "3.38",
    //                 data: {},
    //                 children: [{
    //                     id: "node439",
    //                     name: "4.39",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node440",
    //                     name: "4.40",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node441",
    //                     name: "4.41",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node342",
    //                 name: "3.42",
    //                 data: {},
    //                 children: [{
    //                     id: "node443",
    //                     name: "4.43",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node344",
    //                 name: "3.44",
    //                 data: {},
    //                 children: [{
    //                     id: "node445",
    //                     name: "4.45",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node446",
    //                     name: "4.46",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node447",
    //                     name: "4.47",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node348",
    //                 name: "3.48",
    //                 data: {},
    //                 children: [{
    //                     id: "node449",
    //                     name: "4.49",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node450",
    //                     name: "4.50",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node451",
    //                     name: "4.51",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node452",
    //                     name: "4.52",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node453",
    //                     name: "4.53",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node354",
    //                 name: "3.54",
    //                 data: {},
    //                 children: [{
    //                     id: "node455",
    //                     name: "4.55",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node456",
    //                     name: "4.56",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node457",
    //                     name: "4.57",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node258",
    //             name: "2.58",
    //             data: {},
    //             children: [{
    //                 id: "node359",
    //                 name: "3.59",
    //                 data: {},
    //                 children: [{
    //                     id: "node460",
    //                     name: "4.60",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node461",
    //                     name: "4.61",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node462",
    //                     name: "4.62",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node463",
    //                     name: "4.63",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node464",
    //                     name: "4.64",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }]
    //     }, {
    //         id: "node165",
    //         name: "南区",
    //         data: {},
    //         children: [{
    //             id: "node266",
    //             name: "2.66",
    //             data: {},
    //             children: [{
    //                 id: "node367",
    //                 name: "3.67",
    //                 data: {},
    //                 children: [{
    //                     id: "node468",
    //                     name: "4.68",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node469",
    //                     name: "4.69",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node470",
    //                     name: "4.70",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node471",
    //                     name: "4.71",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node372",
    //                 name: "3.72",
    //                 data: {},
    //                 children: [{
    //                     id: "node473",
    //                     name: "4.73",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node474",
    //                     name: "4.74",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node475",
    //                     name: "4.75",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node476",
    //                     name: "4.76",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node377",
    //                 name: "3.77",
    //                 data: {},
    //                 children: [{
    //                     id: "node478",
    //                     name: "4.78",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node479",
    //                     name: "4.79",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node380",
    //                 name: "3.80",
    //                 data: {},
    //                 children: [{
    //                     id: "node481",
    //                     name: "4.81",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node482",
    //                     name: "4.82",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node283",
    //             name: "2.83",
    //             data: {},
    //             children: [{
    //                 id: "node384",
    //                 name: "3.84",
    //                 data: {},
    //                 children: [{
    //                     id: "node485",
    //                     name: "4.85",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node386",
    //                 name: "3.86",
    //                 data: {},
    //                 children: [{
    //                     id: "node487",
    //                     name: "4.87",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node488",
    //                     name: "4.88",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node489",
    //                     name: "4.89",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node490",
    //                     name: "4.90",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node491",
    //                     name: "4.91",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node392",
    //                 name: "3.92",
    //                 data: {},
    //                 children: [{
    //                     id: "node493",
    //                     name: "4.93",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node494",
    //                     name: "4.94",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node495",
    //                     name: "4.95",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node496",
    //                     name: "4.96",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node397",
    //                 name: "3.97",
    //                 data: {},
    //                 children: [{
    //                     id: "node498",
    //                     name: "4.98",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node399",
    //                 name: "3.99",
    //                 data: {},
    //                 children: [{
    //                     id: "node4100",
    //                     name: "4.100",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4101",
    //                     name: "4.101",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4102",
    //                     name: "4.102",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4103",
    //                     name: "4.103",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node2104",
    //             name: "2.104",
    //             data: {},
    //             children: [{
    //                 id: "node3105",
    //                 name: "3.105",
    //                 data: {},
    //                 children: [{
    //                     id: "node4106",
    //                     name: "4.106",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4107",
    //                     name: "4.107",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4108",
    //                     name: "4.108",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node2109",
    //             name: "2.109",
    //             data: {},
    //             children: [{
    //                 id: "node3110",
    //                 name: "3.110",
    //                 data: {},
    //                 children: [{
    //                     id: "node4111",
    //                     name: "4.111",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4112",
    //                     name: "4.112",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node3113",
    //                 name: "3.113",
    //                 data: {},
    //                 children: [{
    //                     id: "node4114",
    //                     name: "4.114",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4115",
    //                     name: "4.115",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4116",
    //                     name: "4.116",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node3117",
    //                 name: "3.117",
    //                 data: {},
    //                 children: [{
    //                     id: "node4118",
    //                     name: "4.118",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4119",
    //                     name: "4.119",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4120",
    //                     name: "4.120",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4121",
    //                     name: "4.121",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node3122",
    //                 name: "3.122",
    //                 data: {},
    //                 children: [{
    //                     id: "node4123",
    //                     name: "4.123",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4124",
    //                     name: "4.124",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node2125",
    //             name: "2.125",
    //             data: {},
    //             children: [{
    //                 id: "node3126",
    //                 name: "3.126",
    //                 data: {},
    //                 children: [{
    //                     id: "node4127",
    //                     name: "4.127",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4128",
    //                     name: "4.128",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4129",
    //                     name: "4.129",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }]
    //     }, {
    //         id: "node1130",
    //         name: "1.130",
    //         data: {},
    //         children: [{
    //             id: "node2131",
    //             name: "2.131",
    //             data: {},
    //             children: [{
    //                 id: "node3132",
    //                 name: "3.132",
    //                 data: {},
    //                 children: [{
    //                     id: "node4133",
    //                     name: "4.133",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4134",
    //                     name: "4.134",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4135",
    //                     name: "4.135",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4136",
    //                     name: "4.136",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4137",
    //                     name: "4.137",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }, {
    //             id: "node2138",
    //             name: "2.138",
    //             data: {},
    //             children: [{
    //                 id: "node3139",
    //                 name: "3.139",
    //                 data: {},
    //                 children: [{
    //                     id: "node4140",
    //                     name: "4.140",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4141",
    //                     name: "4.141",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }, {
    //                 id: "node3142",
    //                 name: "3.142",
    //                 data: {},
    //                 children: [{
    //                     id: "node4143",
    //                     name: "4.143",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4144",
    //                     name: "4.144",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4145",
    //                     name: "4.145",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4146",
    //                     name: "4.146",
    //                     data: {},
    //                     children: []
    //                 }, {
    //                     id: "node4147",
    //                     name: "4.147",
    //                     data: {},
    //                     children: []
    //                 }]
    //             }]
    //         }]
    //     }]
    // };
    //end
    //init Spacetree
    //Create a new ST instance
    var st = new $jit.ST({
        //树的方向 top-根节点在上方
        orientation: 'top',
        //选中节点离画布中点的x轴距离
        offsetX: 80,
        //选中节点离画布中点的x轴距离
        offsetY: 120,
        //id of viz container element
        injectInto: 'infovis',
        //set duration for the animation
        duration: 800,
        //set animation transition type
        transition: $jit.Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 50,
        //enable panning
        Navigation: {
          enable:true,
          panning:true
        },
        //set node and edge styles
        //set overridable=true for styling individual
        //nodes or edges
        Node: {
            height: 20,
            width: 100,
            type: 'rectangle',
            color: '#4f99c6',
            overridable: true
        },
        
        Edge: {
            type: 'bezier',
            overridable: true,
            color: '#4f99c6'
        },
        
        onBeforeCompute: function(node){
            Log.write("loading " + node.name);
        },
        
        onAfterCompute: function(){
            Log.write("done");
        },
        
        //This method is called on DOM label creation.
        //Use this method to add event handlers and styles to
        //your node.
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            var hasChild = true;
            label.onclick = function(){
                //节点点击事件
                // 判断是否有子节点。
                for(var i = 0; i < leaf.length; i++) {
                    if(node.id == leaf[i].id){
                        hasChild = false;
                    }
                }
                if(hasChild){
                    st.onClick(node.id); 
                }else{
                    alert("该机构没有子结构！");
                }
                // st.onClick(node.id); 
                // st.setRoot(node.id, 'animate');

            };
            //set label styles
            var style = label.style;
            style.width = 100 + 'px';
            style.height = 25 + 'px';            
            style.cursor = 'pointer';
            style.color = 'white';
            style.fontSize = '1em';
            style.textAlign= 'center';
            style.paddingTop = '0px';
        },
        
        //This method is called right before plotting
        //a node. It's useful for changing an individual node
        //style properties before plotting it.
        //The data properties prefixed with a dollar
        //sign will override the global node style properties.
        onBeforePlotNode: function(node){
            //add some color to the nodes in the path between the
            //root node and the selected node.
            if (node.selected) {
                node.data.$color = "#629b58";
            }
            else {
                delete node.data.$color;
                //if the node belongs to the last plotted level
                if(!node.anySubnode("exist")) {
                    //count children number
                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    //assign a node color based on
                    //how many children it has
                    node.data.$color = ['#4f99c6', '#4f99c6', '#4f99c6', '#4f99c6', '#4f99c6', '#4f99c6'][count];                    
                }
            }
        },
        
        //This method is called right before plotting
        //an edge. It's useful for changing an individual edge
        //style properties before plotting it.
        //Edge data proprties prefixed with a dollar sign will
        //override the Edge global style properties.
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#629b58";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    //load json data
    st.loadJSON(json);
    //compute node positions and layout
    st.compute();
    //optional: make a translation of the tree
    st.geom.translate(new $jit.Complex(-200, 0), "current");
    //emulate a click on the root node.
    st.onClick(st.root);


    //end
    //Add event handlers to switch spacetree orientation.
   /* var top = $jit.id('r-top'), 
        left = $jit.id('r-left'), 
        bottom = $jit.id('r-bottom'), 
        right = $jit.id('r-right'),
        normal = $jit.id('s-normal');
        
    
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            st.switchPosition(this.value, "animate", {
                onComplete: function(){
                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                }
            });
        }
    };
    
    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;*/
    //end

}
